import React from 'react';
import "./SeachBox.css";
import { element } from 'prop-types';
 
class SeachBox extends React.Component{
	constructor(props) {
		super(props)
		this.state = {
			isShow : false,
			history : [
				"王以太",
				"乔任梁",
				"李佳隆",
				"周杰伦",
				"啊哈哈",
				"嘻嘻嘻"
			],
			historyIndex : -1,
			value : ''
		}
	}
	
	render(){
		return (
			<div className="dv">
				<input type="text" ref="input" value={this.state.value}
				placeholder={this.props.placeholder}
				 	onFocus={() => {
						 this.setState({
							 isShow : true
						 })
					 }}
					onBlur={() => {
						this.setState({
							isShow : false
						})
					}}
					onKeyDown={(e) => {
						if(e.keyCode === 13){
							var value = this.refs.input.value;
							this.props.sendMessage(value)
						} else if(e.keyCode === 40){
							this.state.historyIndex ++;
							// this.historyIndex = index ? 'history-bgc' : ''
							if(this.state.historyIndex >= this.state.history.length){
								this.state.historyIndex = 0
							}
						} else if(e.keyCode === 38){
							this.state.historyIndex --;
							if(this.state.historyIndex < 0){
								this.state.historyIndex = this.state.history.length-1
							}
						}
						this.setState({
							value : this.state.history[this.state.historyIndex],
							historyIndex:this.state.historyIndex
						})
					}}
				></input>
				<div className={this.state.isShow?"search_history":"search_history_hidden"}>
					<div>
						{
							this.state.history.map((val,index) => {
								return <div className={this.state.historyIndex === index?'history-no':''} 
								onMouseEnter={() => {
									this.setState({
										historyIndex:index
									})
								}}>
									<span>{val}</span>
									<button className={this.state.historyIndex === index ? 'button-show' : 'button-off'}
									onClick={(e) => {
										let index = e.history.historyIndex
										var lists = this.state.history
										lists.splice(index,1)
										this.setState({
											history : lists
										})		
									}}
									>删除</button>
								</div>
							})
						}
					</div>
				</div>
			</div>
		)
	}
}

export default SeachBox